//通过layui.use 先加载table模块。
layui.config({
    base: 'assert/layui/treeTable/'
}).use([ 'table', 'layer', 'form' ,'treeTable'], function() {
	var table = layui.table;
	var layer = layui.layer;
	var form = layui.form;
	var treeTable = layui.treeTable;
	// layui内置了jQuery，要使用jQuery语法，需要显示的将jQuery的$取出。
	var $ = layui.$;

	// 弹出层的下标
	var laryer_index;
	// 对新增按钮绑定事件
	$('#btn_add').on('click', function() {
		// alert('ttt');
		// layer.msg('hello');
		openAddEditPage().done(function() {
			$('#parent').val(-1);
			// 通过ajax请求新增页面弹窗后，将form再重新渲染一下，否则有些样式出不来。
			form.render(); // 更新全部
		});
	});



	// 侦听表单提交
	form.on('submit(but_submit)', function(formData) {
		// layer.msg('侦听表单提交');
		console.log(formData);
		console.log($('#user_add_edit_from').serialize());
		// 使用ajax进行表单提交
		$.ajax({
			type : 'post',
			url : 'manager/catalog/doAddOrUpdate',
			// data: formData.field,//{stuName: "zhangsan", stuAge: "21",
			// stuSex: "0"}
			data : $('#catalog_add_edit_from').serialize(),
			success : function(result) {
				// console.log("reuslt="+result);
				// 向后台提交数据成功了。
				if (result > 0) {
					// 关闭弹窗框
					layer.close(laryer_index);
					// 如果你想关闭最新弹出的层，直接获取layer.index即可
					// layer.close(layer.index);
					// //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
					// 重新加载table中的数据
					initTableData();
				}
			}
		});
		return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});

	// 当前页面加载完成后，显示的调用初始化table数据的方法。
	initTableData();
	// 初始化table数据
	function initTableData() {
		// 第一个实例
		var insTb = treeTable.render({
            elem: '#demo',
            url: 'manager/catalog/findAllCatalog',
            tree: {
                iconIndex: 0,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'rowId',  // id字段名称
                pidName: 'parentId'     // pid字段名称
            },
            cols: [[
    
                {field: 'catalogName', title: '目录名称'},
                {field: 'info', title: '目录介绍'},
                {fixde:'right',align:'center',title: '操作',toolbar:'#barDemo'}
            ]]
        });
	}

	// 监听行工具事件
	treeTable.on('tool(demo)', function(obj) { // 注：tool 是工具条事件名，test 是
		// table 原始容器的属性
		// lay-filter="对应的值"
		console.log(obj);
		var data = obj.data; // 获得当前行数据
		var layEvent = obj.event; // 获得 lay-event 对应的值
		if (layEvent === 'detail') {
			openAddEditPage().done(function() {
				$('#parent').val(data.rowId);
				// 通过ajax请求新增页面弹窗后，将form再重新渲染一下，否则有些样式出不来。
				form.render(); // 更新全部
			});
		} else if (layEvent === 'del') {
			layer.confirm('真的删除行么', function(index) {
				var rowId = data.rowId;
				$.ajax({
					type : 'post',
					url : 'manager/catalog/delete',
					data : {
						"rowId" : rowId
					},
					success : function(result) {
						console.log("result=" + result);
						if (result > 0) {
							// 关闭弹窗
							layer.close(index);
							// 重新加载数据
							initTableData();
						}
					}
				});
				// obj.del(); //删除对应行（tr）的DOM结构
				// layer.close(index);
				// 向服务端发送删除指令
			});
		} else if (layEvent === 'edit') {
			// var rowId = data.rowId;
			// layer.msg(rowId);
			// 调用 openAddEditPage() 方法有返回值，返回的是一个ajax的实例。
			// ajax的done这个方法是响应成功后，调用这个方法
			openAddEditPage().done(function() {
				// layer.msg("ajax的done这个方法是响应成功后，调用这个方法");
				// 对表单赋值
				// {rowId: 4, stuName: "zhaoliu", stuAge: 15, stuSex: 1,
				// activeFlag: 1}
				form.val('form_add_edit', data);
				// data-old="" 显示的向指定的元素中的data-xxx属性进行赋值。将需要修改前的对象的值放入。
				$('#userId').data('data-old', data.userId);
				// 让form表单渲染一下。 form_add_edit = <form
				// lay-filter="student_add_edit_form">
				// form.render(null, 'student_add_edit_form');
				form.render();
			});

		}
	});

	// 弹出新增&修改页面
	function openAddEditPage() {
		return $.ajax({
			type : 'get',
			url : 'manager/catalog/showAddOrUpdate',
			success : function(html) {
				// console.log(html);
				laryer_index = layer.open({
					type : 1,
					title : '目录新增',
					area : [ '800px', '500px' ],
					content : html
				// 注意，如果str是object，那么需要字符拼接。
				});
			}
		});
	}

});